<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: Wupy
 * @Date: 2023-01-09 12:17:53
 * @LastEditors: Wupy
 * @LastEditTime: 2023-02-21 14:23:53
-->
<!-- 导航栏 -->
<template>
    <div class="navTitle">
        <div class="leftIcon"><var-icon name="chevron-left" :size="35" color="#000" @click="backRouter()" /></div>
    </div>
    <!-- 讨论发布者 -->
    <div class="discussUser">

        <div class="userName">
            {{ discussList.teacherName }}
        </div>
        <div class="discussTime">
            {{ discussList.createTime }}发布
        </div>
    </div>
    <!-- 讨论内容 -->
    <div class="discuss">
        <!-- 讨论题目 -->
        <div class="discussTitle">
            {{ discussList.name }}
        </div>
        <!-- 讨论内容 -->
        <div class="discussContent">
            {{ discussList.content }}
            <!-- <var-image class="discussImg" :src="imgRequire(discussion.discussImg)" alt=""/> -->
        </div>
    </div>
    <!-- 发布评论 -->
    <var-input class="discussInput" placeholder="添加评论" v-model="discussInput" />
    <button class="addButton" @click="addDisscuss(discussInput)">发布评论</button>

    <!-- 评论功能 -->
    <div class="comment">
        <div class="commentTitle">
            评论
        </div>
        
        <!-- 评论项 -->
        <div class="commentCard" v-for="item in commentList">
            <!-- 评论的用户信息 -->
            <div class="commentUser">
                <div class="commentName">
                   评论者 {{ item.name }}
                </div>
                <div class="commentTime">
                    {{ item.createTime }}评论
                </div>
            </div>
            <!-- 评论内容 -->
            <div class="commentContent">
                {{ item.content }}
            </div>

            <var-divider :inset="36" margin="10px 0" />
        </div>
    </div>
</template>

<script  setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';

import { useDiscussStore } from '@/stores/discuss'
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../stores/user';
import dayjs from 'dayjs'
const userstore = useUserStore();
const { getuser } = userstore
const { user } = storeToRefs(userstore);
const router = useRouter()
const route = useRoute()

const topicId = route.query.topicId
const discussStore = useDiscussStore()
const { DisucssList, addUserComment } = discussStore
const { discussList, commentList } = storeToRefs(discussStore)



//点击返回图标的方法
function backRouter() {
    router.go(-1)
}
const discussInput = ref()
//定义显示图片的方法
const imgRequire = (img) => {
    try {
        const handlePath = img.replace('.', '.');
        return new URL(handlePath, import.meta.url).href;
    } catch (error) {
        console.warn(error);
    }
};
let a = dayjs().format('YYYY-MM-DD HH:mm:ss' )




// 发布评论的方法
const addDisscuss = (discussInput) => {
    addUserComment(topicId, user.value.id, discussInput,a)
    console.log(topicId, user.value.id, discussInput,a );


}
// 获取用户id
const userId = ref()
// const userId = Number(localStorage.getItem('userId'))
// console.log('11', user.value.id);

// 获取当前讨论信息
onMounted(() => {
    DisucssList(topicId)
    getuser()
    userId.value = user.value.id
})
</script>

<style lang="less" scoped>
.navTitle {
    line-height: 30px;
    background-color: #fff;

}

.discussUser {
    background-color: #fff;
    display: flex;
    padding-top: 10px;
    padding-left: 10px;



    .userName {
        white-space: nowrap;
        margin-left: 10px;
        font-size: 14px;
        color: #A0A4BF;
    }

    .discussTime {
        margin-left: 170px;
        white-space: nowrap;

        font-size: 12px;
        color: #a4a6b5;
    }
}

.discuss {
    background-color: #fff;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;

    .discussTitle {
        font-size: 20px;
        font-weight: 600;
    }

    .discussContent {
        margin-top: 20px;
        font-size: 15px;
        font-weight: 300;


    }
}

.discussInput {
    background-color: #fff;
    padding-left: 20px;
    width: 400px;
    padding-right: 50px;
}

.addButton {
    margin: 30px 20px;
    width: 330px;
    height: 50px;
    border: 1px solid black;
    background-color: #fff;
}

.comment {
    padding-top: 10px;
    background-color: #fff;

    .commentTitle {
        padding-top: 10px;
        margin: 10px;
        font-size: 18px;
        font-weight: 600;
    }

    .commentCard {
        margin-top: 0px;
        background-color: #dadffc;

        .commentUser {
            display: flex;
            height: 40px;

            .commentAvatar {
                margin: 10px;
                border-radius: 10px;
                width: 20px;
            }

            .commentName {
                white-space: nowrap;
                font-weight: 600;
                font-size: 13px;
                margin-left: 10px;
                margin-top: 15px;
                // margin-left: -4px;
            }

            .commentTime {
                white-space: nowrap;

                margin-top: 15px;
                margin-left: 150px;
                font-size: 12px;
                font-weight: 300;
                color: #A0A4BF;
            }
        }

        .commentContent {
            margin-top: 0px;
            margin-left: 30px;
            font-size: 15px;
            font-weight: 300;
        }

        .point {
            display: flex;
            margin-top: 10px;

            .pointImg {
                width: 14px;
                margin-left: 30px;
            }

            .pointNum {
                margin-left: 10px;
                font-weight: 300;
                color: #A0A4BF;
                font-size: 11px;
            }
        }
    }
}</style>